<template>
  <div class="register" ref="ref_register" v-if="this.$store.state.inRegister">
      <!-- v-if="!this.$store.state.islogin" -->
      <div class="register_box">
          <form action="formsubmit" @submit.prevent="submit">
              <section>
                  <div class="section_welcome">注册用户</div>
              </section>
                <section>
                  <div class="section_title" ref="ref_section_username">昵称：</div>
                  <label for="username"></label><input type="text" 
                  v-model="username" name="username" @input="oninput3()">
              </section>
              <section>
                <div class="section_title" ref="ref_section_user">账号：</div>
                  <label for="user"></label><input type="number" 
                  v-model="user" name="user" @input="oninput1()">
              </section>
                <section>
                  <div class="section_title" ref="ref_section_password">密码：</div>
                  <label for="password"></label><input @input="oninput2()"
                   type="password" name="password"  v-model="password">
              </section>
                <section>
                  <div class="section_title_code_text" ref="ref_section_code">验证码</div>
                  <label for="code"></label><input type="number" 
                  v-model="code" name="code" class="code" @input="oninput4()">
                  <div class="code_box" @click="getCode()">{{code_mess}}</div>
              </section>
                <section>
                  <div class="section_register" @click="submit()">注册</div>
                   <div class="section_register" @click="backLogin()">返回登录</div>
              </section> 
          </form>
          <div class="register_log" v-loading="loading"></div>
      </div>
      <img src="../img/login_bg.png" alt="" class="login_bg">
  </div>
</template>
<script>
export default {
    data(){
        return{
            username:'',
            user:'',
            password:'',
            code:'',
            register_mess:'',
            register_color:'',
            loading:'',
            code_mess:'获取验证码'
        }
    },
    // watch:{
    //     username:function(val){
    //         console.log('监听到了',val);
    //        return this.username = val
    //     }
    // },

    methods:{
        submit(){
            //获取当前时间
             let timeData = new Date();
             let datevalue = timeData.getFullYear() + "年" + (timeData.getMonth() + 1)
                     + "月" + timeData.getDate()+'日';
            this.$axios
            .post('api/user_lists/insert?username='+this.username+'&user='+this.user
            +'&password='+this.password+'&date='+datevalue
            ).then(res=>{
                if(res.data.code == 200){  
                    this.loading = true
                    this.register_color = 'teal'
                    this.register_mess = '注册成功！'
                    let timer = setInterval(() => {
                        this.loading = ''
                        this.$router.push({   
                        })
                        this.$store.commit("inRegisterPage",false)
                        this.$store.commit("inLoginPage",true)
                        this.open1() 
                        clearInterval(timer)
                         
                    }, 2000);  
                }else{
                    this.loading = true
                    this.register_color = 'red'
                    this.register_mess = '用户已存在！'
                     let timer = setInterval(() => {
                        this.loading = ''
                        this.open1()
                        clearInterval(timer)
                    }, 2000);
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        getCode(){
            this.code_mess ='Code:'+ Math.floor(Math.random()*4000)
           
        },
        backLogin(){
            this.$store.commit('inRegisterPage',false)
            this.$store.commit('inLoginPage',true)
            this.$router.push({
                path:'/login',
                
            })
           
        },
        oninput1(){
             if(this.user != ''){
                  this.$refs.ref_section_user.style.transition = 'all 1.5s'
                  this.$refs.ref_section_user.style.transform = 'translateY(-30px)'
              
             }else{
                 this.$refs.ref_section_user.style. transition = 'all 1.5s'
                 this.$refs.ref_section_user.style.transform = 'translateY(0px)'
             }
        },
         oninput2(){
             if(this.password != ''){
                  this.$refs.ref_section_password.style. transition = 'all 1.5s'
                  this.$refs.ref_section_password.style.transform = 'translateY(-30px)'
             }else{
                 this.$refs.ref_section_password.style. transition = 'all 1.5s'
                 this.$refs.ref_section_password.style.transform = 'translateY(0px)'
             }
        },
         oninput3(){
             if(this.username != ''){
                  this.$refs.ref_section_username.style. transition = 'all 1.5s'
                  this.$refs.ref_section_username.style.transform = 'translateY(-30px)'
             }else{
                 this.$refs.ref_section_username.style. transition = 'all 1.5s'
                 this.$refs.ref_section_username.style.transform = 'translateY(0px)'
             }
        },
         oninput4(){
             if(this.code != ''){
                  this.$refs.ref_section_code.style. transition = 'all 1.5s'
                  this.$refs.ref_section_code.style.transform = 'translateY(-30px)'
             }else{
                 this.$refs.ref_section_code.style. transition = 'all 1.5s'
                 this.$refs.ref_section_code.style.transform = 'translateY(0px)'
             }
        },
        open1() {
        const h = this.$createElement;
            this.$notify({
            title: '系统提示',
            message: h('i', { style: 'color: '+this.register_color},this.register_mess)
            })
        },
        open2() {
            this.$notify({
              title: '系统提示',
              message: '这是一条不会自动关闭的消息',
              duration: 0
            });
          },
    },

}
</script>

<style>
.register{
  position: relative;
  width: 100%;
  height: 740px;
  display: block;
}
.register_bg{
    position: relative;
    top: -2%;
    width: 100%;
    height: 100%;
    z-index: -10;
    opacity: 40%;
}
.register_box{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
    height: 400px;
    border: 2px solid #ccc;
    border-radius: 10px;
    display: flex;
}
form{
    width: 60%;
    height: 100%;
    background: #f7f7f7;
    display: flex;
    flex-flow:column;
    border-radius: 10px;
}
.register_log{
    width: 40%;
    background-color: rgba(204, 204, 204, 0.444);
    border-radius: 10px;
}
.section_welcome{
    display: flex;
    width: 100%;
    font-size: 30px;
    color: #407cd5;
}
section{
    margin: 20px 10% 0px 10%;
    width: 50%;
    height: 8%;
}
.section_title{
    position: relative;
    width: auto;
    top: 30px;
    color: gray;
}
.section_title_code_text{
    position: relative;
    left: 0px;
    width: auto;
    top:10px;
    color: gray;
}
.code{
    position:absolute;
    width: 250px;
}
.code_box{
    position: relative;
    top: -4px;
    left: 85%;
    width: 40%;
    height: 40px;
    color: white;
    border-radius: 15px;
    background-color: #ccc;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
}
.section_register{
    margin-left: 30px;
    margin-top: 10px;
    width: 60%;
    height: 50px;
    border-radius: 15px;
    background-color: #407cd5;
    color: white;
    font-size: 22px;
    text-align: center;
    line-height: 50px;
    border: 1px solid black;
}
section:nth-child(6){
   width: 85%;
   height: 50px;
   display: flex;
}
section:nth-child(6)>div:nth-child(1){
  width: 60%;
  background-color: #407cd5;
  border: 2px solid gray
}
section:nth-child(6)>div:nth-child(2){
  margin-top: 30px;
  width: 40%;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  color: rgb(75, 71, 71);
  background-color: transparent;
  border: 2px solid transparent;
  text-decoration: underline;
}
input{
    width: 250px;
    height: 30px;
    border: 2px solid transparent;
    background-color: transparent;
    border-bottom: 2px solid gray; 
     outline: none;
    font-size: 20px;
}

input:focus{
   color: black;
}
section:hover .section_title{
    user-select:none;
    transform:translateY(-30px);
    transition: all 1.5s;
}
.login_box:focus .section_title_code_text{
    user-select:none;
    transform:translateY(-30px);
    transition: all 1.5s;
}

</style>